<template>
	<el-switch
		style="--el-switch-on-color: #333"
		v-model="isDark"
		:active-action-icon="Moon"
		:inactive-action-icon="Sun"
		size="large"
	/>
</template>

<script setup lang="tsx">
const props = defineProps({
	dark: Boolean
})

const Moon = () => <i class="i-prime:moon text-3xl"></i>
const Sun = () => <i class="i-octicon:sun-24 text-3xl"></i>

const isDark = ref(props.dark)
const preferredDark = usePreferredDark()

function toggleMode(flag: boolean) {
	if (flag) {
		document.documentElement.classList.add('dark')
	} else {
		document.documentElement.classList.remove('dark')
	}
}
watch(
	[isDark],
	() => {
		nextTick(() => {
			toggleMode(isDark.value)
		})
	},
	{
		immediate: true
	}
)
// 跟随系统
watch([preferredDark], () => {
	nextTick(() => {
		toggleMode(preferredDark.value)
		isDark.value = preferredDark.value
	})
})
</script>
<!-- <script setup lang="ts">
const Moon = () => h('i', {
  class: 'i-prime:moon'
})
</script> -->

<style scoped></style>
